<template>
  <div class="main">
    <van-nav-bar
      @click-left="jump"
      :style="{
        height: 'auto',
        background: 'linear-gradient(90deg,#109ffc,#00c7ff)'
      }"
    >
      <van-icon
        :style="{ lineHeight: '54px' }"
        size="30"
        name="arrow-left"
        color="#fff"
        slot="left"
      />
      <van-search
        slot="title"
        shape="round"
        background="transparent"
        v-model="supplier"
        placeholder="请输入供应商的名称/助记码"
        @search="onSearch"
      >
      </van-search>
      <div
        slot="right"
        :style="{ color: '#fff', lineHeight: '54px' }"
        @click="onSearch"
      >
        取号
      </div>
    </van-nav-bar>
    <div :style="{ width: noticeBarWidth }">
      <van-notice-bar
        :text="noticeContent"
        left-icon="volume-o"
      ></van-notice-bar>
    </div>

    <list-table
      class="content"
      :colums="colums"
      :data="data"
      :listTable="listTable"
      @onLoad="onLoad"
    ></list-table>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="pickColumns"
        @cancel="showPicker = false"
        @confirm="handleGetNumber"
      />
    </van-popup>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Inject } from "vue-property-decorator";
// 引入组件
import ListTable from "_c/list-table";
// 引入接口
import {
  getSupplierInfo,
  keepGetNumber,
  getGetNumberInfo,
  getNowNextcode
} from "api/getNumber";
// 引入工具函数
import { formatTime, formatDataBaseTime } from "libs/tools";
@Component({
  components: {
    ListTable
  }
})
export default class GetNumber extends Vue {
  @Inject() private readonly reload!: Function;
  timer: any = null;
  noticeBarWidth = "100px";
  pickColumns = [];
  showPicker: Boolean = false;
  supplier: String = "";
  noticeContent: String = "";
  listTable = {
    finished: false,
    loading: false
  };
  pageIndex = 1;
  pageSize: Number = 20;
  colums = [
    {
      title: "编号",
      width: 3,
      key: "code"
    },
    {
      title: "供应商编码",
      width: 6,
      key: "supplier_code"
    },
    {
      title: "供应商名称",
      key: "MC"
    },
    {
      title: "取号时间",
      width: 6,
      key: "get_number_time"
    }
  ];
  data: any = [];
  getNowNextCode() {
    getNowNextcode().then(res => {
      if (res.data.code === 200) {
        let { result } = res.data;
        let nowContent = `当前正在验货的是${result[0].code}号`;
        let nextContent = result[1] ? `下一个要验货的是${result[1].code}` : "";
        this.noticeContent = nowContent + "," + nextContent;
      } else {
        this.noticeContent = "没有要验货的供应商";
      }
      this.$nextTick(() => {
        this.noticeBarWidth = "100%";
      });
    });
  }
  jump() {
    this.$router.push("/login");
  }
  onLoad() {
    this.pageIndex++;
    this.initData();
  }
  /**
   * @description 点击取号的时候获取供应商
   */
  onSearch() {
    let data = {
      supplier: this.supplier
    };
    getSupplierInfo(data).then(res => {
      if (res.data.code === 200) {
        this.pickColumns = res.data.result.map(item => {
          return {
            text: item.MC,
            supplierCode: item.BM
          };
        });
        this.showPicker = true;
      } else if (res.data.code === 400) {
        this.$Message.warning("没有搜索到供应商信息！");
      } else {
        this.$Message.warning("服务器错误！");
      }
      this.supplier = "";
    });
  }
  /**
   * @description 取号
   */
  handleGetNumber(row, index) {
    let data = {
      supplierCode: row.supplierCode
    };
    keepGetNumber(data).then(res => {
      if (res.data.code === 200) {
        this.$Message.success("取号成功");
        this.reload();
      } else if (res.data.code === 400) {
        this.$Message.warning("取号失败");
      } else {
        this.$Message.warning("服务器错误！");
      }
    });
  }
  /**
   * @description 初始化表格数据
   */
  initData() {
    let data = {
      pageIndex: this.pageIndex,
      pageSize: this.pageSize
    };
    getGetNumberInfo(data).then(res => {
      this.listTable.loading = false;
      if (res.data.code === 200) {
        res.data.result.forEach(item => {
          item.get_number_time = formatDataBaseTime({
            time: item.get_number_time,
            type: "time"
          });
          this.data.push(item);
        });
        if (res.data.result.length < this.pageSize) {
          this.listTable.finished = true;
        }
      } else {
        this.listTable.finished = true;
      }
    });
  }
  created() {
    this.initData();
    this.getNowNextCode();
    this.timer = setInterval(() => {
      this.getNowNextCode();
    }, 1800000);
  }
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  }
}
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .content {
    flex-grow: 1;
    overflow: auto;
  }
}
</style>
